<template>
    <el-dialog :title="dialogOption.title" :visible.sync="dialogOption.visible" width="600px">
        <div class="itemType_area">
            <el-radio-group v-model="itemType" @change="handelTabSettingChange" size="medium">
                <el-radio-button v-for="(item, index) in itemTypeList" :key="index" :label="item.value">{{item.name}}</el-radio-button>
            </el-radio-group>
        </div>
        <div class="table">
            <tableTemplate :data="dataList" :options="tableOptions" style="width: 480px"></tableTemplate>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogOption.visible = false">关 闭</el-button>
        </div>
    </el-dialog>
</template>

<script>

    export default {
        name: "TableSetting",
        props: {
            option: {
                type: Object,
                default: {
                    visible: false
                }
            }
        },
        data(){
            return {
                dialogOption: {},
                dataList: [],
                tableOptions: {
                    ref: 'tabSettingTable',
                    multiSelect: false,
                    columns: [
                        {
                            label: '表格名称',
                            prop: 'name',
                            align: 'center'
                        },
                        {
                            label: '是否使用',
                            prop: 'state',
                            width: 120,
                            align: 'center',
                            valueType: 'checkbox',
                            box: {
                                trueLabel: 1,
                                falseLabel: 0,
                                method: (row) => {
                                    this.saveTabSetting(row);
                                }
                            }
                        },
                        {
                            label: '顺序',
                            prop: 'sn',
                            width: 120,
                            align: 'center',
                            valueType: 'input',
                            min: 1,
                            type: 'number',
                            method: (row) => {
                                this.saveTabSetting(row);
                            }
                        },
                    ],
                },
                tableSettingData: {
                    E: [
                        {name: '检查项目'},
                        {name: '检查内容'},
                        {name: '规定值或允许偏差'},
                        {name: '设计值'},
                        {name: '实测（偏差）值'},
                        {name: '影像记录'},
                        {name: '备注'},
                    ],
                    F: [
                        {name: '检查项目'},
                        {name: '检查内容'},
                        {name: '规定值或允许偏差'},
                        {name: '设计值'},
                        {name: '实测（偏差）值'},
                        {name: '检查结果'},
                        {name: '影像记录'},
                        {name: '备注'},
                    ],
                    C: [
                        {name: '检查项目'},
                        {name: '检查内容'},
                        {name: '规范或标准图'},
                        {name: '影像记录'},
                        {name: '备注'},
                        {name: '检查情况'},
                    ],
                },
                itemTypeList: [
                    {
                        name: 'E',
                        value: 'E'
                    },
                    {
                        name: 'F',
                        value: 'F'
                    },
                    {
                        name: 'C',
                        value: 'C'
                    }
                ],
                itemType: 'E',
            };
        },
        watch: {
            option() {
                this.initData();
            },
        },
        mounted() {
            this.initData();
        },
        methods: {
            initData() {
                let $this = this;
                $this.dialogOption = $.extend({}, $this.option);
                $this.titleSetting();
                let queryData = {};
                // queryData.data_sid = $this.dialogOption.data_sid;
                let proSid = $this.dialogOption.pro_sid;
                if(proSid != undefined){
                    queryData.pro_sid = $this.dialogOption.pro_sid;
                    queryData.tab_type = $this.itemType;
                }else{
                    queryData.data_sid = $this.dialogOption.data_sid;
                }
            },

            titleSetting(){
                let $this = this;
                if($this.itemType === 'E'){
                    $this.dialogOption.title = '项目管理E测量表格设置';
                }
                if($this.itemType === 'F'){
                    $this.dialogOption.title = '项目管理F工序表格设置';
                }
                if($this.itemType === 'C'){
                    $this.dialogOption.title = '项目管理C安全检查表格设置';
                }
            },


            handelTabSettingChange(val) {
                let $this = this;
                $this.itemType = val;
                $this.initData();
            },


            saveTabSetting(row){
                let $this = this;
                let proSid = $this.dialogOption.pro_sid;
                // if(proSid != undefined){
                //     $this.saveMxProPartTabSetting(row);
                // }else{
                //     $this.saveMxPartBaseTabSetting(row);
                // }
            },


            saveMxProPartTabSetting(row){
                let $this = this;
                mxProPartTabSettingApi.saveMxProPartTabSettings({
                    tab_type: $this.dialogOption.type,
                    pro_sid: $this.dialogOption.pro_sid,
                    tab_field_name: row.name,
                }, () =>{
                    $this.$message.success('保存成功！');
                    let list = [];
                    $this.dataList.forEach(item => {
                        let obj = $.extend({}, item);
                        if (item.$index === row.$index) {
                            obj.state = row.state;
                        }
                        list.push(obj);
                    });
                    $this.dataList = list;
                });
            },

            saveMxPartBaseTabSetting(row){
                let $this = this;
                mxPartBaseTabSettingApi.saveMxPartBaseTabSettings({
                    tab_type: $this.dialogOption.type,
                    data_sid: $this.dialogOption.data_sid,
                    tab_field_name: row.name,
                }, () =>{
                    $this.$message.success('保存成功！');
                    let list = [];
                    $this.dataList.forEach(item => {
                        let obj = $.extend({}, item);
                        if (item.$index === row.$index) {
                            obj.state = row.state;
                        }
                        list.push(obj);
                    });
                    $this.dataList = list;
                });
            },
        },
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .itemType_area {
        padding-bottom: 10px;
        border-bottom: 1px solid #EBEEF5;
    }
</style>
